<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click.stop="reload">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="account" label="商户账号"></el-table-column>
        <el-table-column prop="company_name" label="单位名称"></el-table-column>
        <el-table-column prop="shop_name" label="商铺名称"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="cert_validity" label="证件有效期" width="150"></el-table-column>
        <el-table-column prop="send_start" label="配送起始时间" width="150"></el-table-column>
        <el-table-column prop="send_end" label="配送结束时间" width="150"></el-table-column>
        <el-table-column prop="bank_no" label="银行卡号" width="150"></el-table-column>
        <el-table-column prop="bank_address" label="开户行"></el-table-column>
        <el-table-column prop="bank_phone" label="预留电话" width="100"></el-table-column>
        <el-table-column prop="bank_name" label="预留姓名" width="100"></el-table-column>
        <el-table-column prop="legal_name" label="公司法人"></el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="150">
          <template slot-scope="scope">
            {{timeFormat(scope.row.create_time)}}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="拒绝理由"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="sort(scope.row.id)">排序
            </el-button>
            <el-button v-if="scope.row.status == 0" type="text" size="small" @click="changeStatus(scope.row.id,0)">审核
            </el-button>
            <el-button v-if="scope.row.status == 3" type="text" size="small" @click="changeStatus(scope.row.id,1)">启用
            </el-button>
            <el-button v-if="scope.row.status != 3" type="text" size="small" @click="changeStatus(scope.row.id,3)">禁用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
          :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
      <el-dialog title="审核商户" :visible.sync="checkVisible" width="400px" :before-close="handleClose('checkForm')">
        <el-form ref="checkForm" :model="checkForm" label-width="100px" size="small" :rules="rules">
          <el-form-item label="是否通过" prop="status">
            <el-radio-group v-model="checkForm.status" @change="btnChange">
              <el-radio :label="1" border>审核通过</el-radio>
              <el-radio :label="2" border>审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="checkForm.status ==2" label="不通过理由" prop="remark">
            <el-input v-model="checkForm.remark" placeholder="请输入理由"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('checkVisible', 'checkForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('checkVisible','checkForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDate } from '@/untils/common.js'
import { shopList, editShop, shopSort } from '@/network/api.js'

export default {
  name: 'store',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10
      },
      count: 0, // 总记录数
      table: [],
      checkForm: {
        id: 0,
        status: 1,
        remark: ''
      },
      checkVisible: false, // 审核表单
      rules: {
        status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        remark: [
          {
            validator: (rule, value, callback) => {
              if (this.checkForm.status === 2 && value === '') {
                callback(new Error('请输入理由'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.search()
  },
  computed: {
    statusName() {
      return status => {
        switch (status) {
          case 0:
            return '未审核'
          case 1:
            return '审核通过'
          case 2:
            return '审核未通过'
          case 3:
            return '已禁用'
        }
      }
    },
    timeFormat() {
      return time => {
        return formatDate(time)
      }
    }
  },
  methods: {
    reload() {
      location.reload()
    },
    async search() {
      try {
        const rtn = await shopList(this.searchForm)
        this.table = rtn.data.data
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    // 修改状态
    changeStatus(id, status) {
      switch (status) {
        case 0: // 审核是否通过
          this.checkForm.id = id
          this.checkVisible = true
          break
        case 1: // 启用
          this.$confirm('确定要启用吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async () => {
              try {
                const formdata = {
                  id,
                  status: 1,
                  remark: ''
                }
                await editShop(formdata)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
            })
            .catch(() => {})
          break
        case 3: // 禁用
          this.$confirm('确定要禁用吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async () => {
              try {
                const formdata = {
                  id,
                  status: 3,
                  remark: ''
                }
                await editShop(formdata)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
            })
            .catch(() => {})
      }
    },
    // 商户排序
    sort(id) {
      this.$prompt('请输入新的排序', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9][0-9]{0,}$/,
        inputErrorMessage: '不正确的排序'
      })
        .then(async ({ value }) => {
          try {
            const formdata = {
              id,
              sort: value
            }
            await shopSort(formdata)
            this.search()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {})
    },
    btnChange(value) {
      this.checkForm.remark = ''
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          switch (formName) {
            case 'checkForm': // 添加表单
              try {
                await editShop(this.checkForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
